<template name='comment'>
  <div class="title comment" style="text-align:left; padding-bottom: 1em;">
    <div class="ui comment" style='max-width: 9999px;'>
        <a class="ui mini circular avatar image" style="margin-right:10px;width:48px;height:48px;">
          <div style="background-size: cover; min-width:48px; width:48px; height: 48px; background-image:url({{picture _id}})"></div>
        </a>
        {{#if equals author currentAuthor}} 
          <a href='/c/{{author}}' class="ui author owner">{{author}}</a>
        {{else}}
          <a href='/c/{{author}}' class="ui author">{{author}}</a>
        {{/if}}
        <div class="metadata">
          <a class="date" href='/v/{{author}}/{{link}}'>{{timeAgo ts}}</a>
          <span class="money">{{displayRewards dist distSteem distScot distHive}}</span>
        </div>
        <div class="text" style="word-wrap: normal;flex-wrap: wrap;overflow: hidden; margin-top: 10px;">
          {{{syntaxed json.description}}}
        </div>
        <div class="actions noselect">
          {{#if hasUpvoted this}}
            <a class="upvoteComment" data-refs='{{json.refs}}' data-id='{{_id}}'>
            <i class="thumbs up icon red"></i> {{uniques votes votesSteem votesHive 'up'}}</a>
          {{else}}
            <a class="upvoteComment" data-refs='{{json.refs}}' data-id='{{_id}}'>
            <i class="thumbs up icon"></i> {{uniques votes votesSteem votesHive 'up'}}</a>
          {{/if}} {{#if hasDownvoted this}}
            <a class="downvoteComment" data-refs='{{json.refs}}' data-id='{{_id}}'>
            <i class="thumbs down icon red"></i> {{uniques votes votesSteem votesHive 'down'}}</a>
          {{else}}
            <a class="downvoteComment" data-refs='{{json.refs}}' data-id='{{_id}}'>
            <i class="thumbs down icon"></i> {{uniques votes votesSteem votesHive 'down'}}</a>
          {{/if}}
          <a class="replyTo ui blue" data-refs='{{json.refs}}' data-id='{{_id}}'>{{ translate 'GLOBAL_REPLY'}}</a>
        </div>
    </div>
    {{#if isReplying this}}
      <form class="ui reply form">
        <div class="field">
          <textarea style='height: 5em;min-height:5em;'></textarea>
        </div>
        <div class="ui blue right labeled icon submit button dtube pos-rel" style="float:right;vertical-align: top;">
            <i class="ui blue icon remove repl dsp-non" style="background:white;opacity:1;"></i>
            <i class="ui blue icon load repl dsp-non" style="background:white;opacity:1;"><div class="ui active loader"></div></i>
            <i class="ui blue right icon talk repl iconloader on" style="background:white;"></i>
            <div style="display:inline-block;padding: 0.8em 1em;">{{ translate 'VIDEO_ADD_COMMENT'}}</div>
        </div>
      </form>
    {{/if}} 
    {{#if comments.length}}
      <!-- <i class="ui angle down icon center"></i>
      <button id="showreplies" class="ui labeled button commentbutton" style="margin-top:10px;">
          {{#if equals comments.length 1}}
            {{ translate 'COMMENT_SHOW'}} {{comments.length}} {{ translate 'COMMENT_REPLY'}}
          {{else}}
            {{ translate 'COMMENT_SHOW'}} {{comments.length}} {{ translate 'COMMENT_REPLIES'}}
          {{/if}}
      </button> -->
    {{/if}}
  </div>
  
  {{#if comments.length}} 
    <div class="content comment" style="margin-top:20px"> 
      {{#with comments}} 
        {{> subcomments}} 
      {{/with}} 
    </div>
  {{/if}}
</template>